<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 设置头部信息 -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="智能S21-2班雒郝名">
  <title>饼图</title>
  <script src="admin/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="admin/css/jquery.stepy.css">
  <link rel="stylesheet" href="admin/css/bootstrap.min.css">
  <style>
    /* 使echart图以合适的大小出现 */
    #main {
      width: 600px;
      height: 400px;
      margin: 0 auto;
      margin-top: 20px;
    }

    body {
      overflow-x: hidden;
      overflow-y: hidden;
    }

    table {
      border-collapse: collapse;
      border: 1px solid #ccc;
      width: 100%;
      margin: 0 auto;
      text-align: center;
      overflow: auto;
    }

    th {
      background-color: rgb(153, 151, 151);
      height: 40px;
      line-height: 40px;
      text-align: center;
    }

    td {
      height: 40px;
      line-height: 40px;
      text-align: center;
    }

    .btn {
            margin-left: 5px;
        }
  </style>
</head>

<body>
  <div class="main">

    <table border="1" id="staff" style="border-collapse:collapse;text-align: center;align-items: center;">
      <tr>
        <th>员工编号</th>
        <th>员工姓名</th>
        <th>员工年龄</th>
        <th>职位</th>
        <th>操作</th>
      </tr>
    </table>
    <script>
                  function xiugai() {
                alert("该功能正在开发中，敬请期待…");

            }
            function shanchu() {
                alert("该功能正在开发中，敬请期待…");

            }
      fetch("http://localhost:8070/datas3").then(res => res.json()).then(json => {
        for (var i = 0; i < json.adatas.length; i++) {
          var tr = document.createElement("tr");
          var td1 = document.createElement("td");
          var td2 = document.createElement("td");
          var td3 = document.createElement("td");
          var td4 = document.createElement("td");
          var td5 = document.createElement("td");
          td1.innerText = json.xdatas[i];
          td2.innerText = json.ydatas[i];
          td3.innerText = json.zdatas[i];
          td4.innerText = json.wdatas[i];
          td5.innerHTML = '<button id="btn1" class="btn btn-danger" onclick="xiugai()">修改</button><button id="btn2" onclick="shanchu()" class="btn btn-danger">删除</button>';
          tr.appendChild(td1);
          tr.appendChild(td2);
          tr.appendChild(td3);
          tr.appendChild(td4);
          tr.appendChild(td5);
          document.getElementById("staff").appendChild(tr);
        }
        var table = document.getElementById("staff");
        var tr = table.getElementsByTagName("tr");
        for (var i = 1; i < tr.length; i++) {
          tr[i].style.backgroundColor = "skyblue";
          tr[i].onmouseover = function () {
            this.style.backgroundColor = "#c1e0ff";
          }
          tr[i].onmouseout = function () {
            this.style.backgroundColor = "#redyellow";
          }
        }
      });

    </script>

    <!-- 创建一个容纳echart图表的容器 -->
    <div id="main" style="width: 600px; height: 400px;"></div>
    <!-- <div class="row" style="padding-top: 400px;">
            <div class="col-md-12">
                 <!-- 为Echarts定义一个容器 -->
    <!-- <div id="main" style="width: 800px;;height: 800px;line-height: 800px;"></div> -->


    <!-- <script src="js/dashboard-chart-init.js"></script> -->
    <!-- 引入Echarts文件 -->
    <script src="js/echarts.js"></script>


    <!-- Echarts使用流程
1.导入插件：导入echarts.js，注意相对路径是否正确
2.创建容器：创建一个容纳echarts图表的容器，一般为div
3.创建echarts实例：创建一个变量，并为调用echarts.init方法为它赋值，传入容器

4.配置echarts非data属性：设置echarts图表类型等参数
5.异步获取echart图标中的数据点集合
  5.1-->
    <script>
      // 3.创建echarts实例：创建一个变量，并为调用echarts.init方法为它赋值，传入容器
      var myChart = echarts.init(document.getElementById('main'));

      // 4.配置echarts非data属性：设置echarts图表类型等参数
      option = {
        title: {
          text: '员工职位统计图'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10%',
          left: 'center'
        },
        series: [
          {
            name: '员工职位',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 20,
              borderColor: 'skyblue',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [{ value: 1, name: 'boss' },
            { value: 11, name: '理货员' },
            { value: 6, name: '收银员' },]

          }
        ]
      };
      //   显示echarts图像
      myChart.setOption(option);
      // 5.异步获取echart图标中的数据点集合
      fetch('datas3').then(res => res.json().then(res => {
        myChart.setOption({
          data: res1.adatas
        });
      }));

    </script>

</body>

</html>